<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="getTableList" :data="deptData" row-key="id"
      :expand-row-keys="['1', '2']" dataKey='' :pagination="false" :init-param="initParam" :indent="30">
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <SButton :buttonProps="{ type: 'primary' }" buttonText="新增" contentType="both" icon="CirclePlus"
          @click="openDialog('新增')" />
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <SButton :buttonProps="{ type: 'primary', link: true }" buttonText="编辑" @click="openDialog('编辑', scope.row)" />
      </template>
    </ProTable>

    <DepartmentDialog ref="departmentDialogRef" :title="dialogTitle" :rowData="selectedRow"
      v-model:visible="dialogVisible" @refresh="proTable?.getTableList" />
  </div>
</template>

<script setup lang="tsx" name="useProTable">
import { ref, reactive, computed, onMounted } from "vue";
import { User } from "@/api/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps, HeaderRenderScope } from "@/components/ProTable/interface";
import SButton from "@/components/SButton/index.vue";
import { useDataStore } from '@/stores/modules/data'
import { departmentStatus } from "@/utils/dict";
import { addOrganize, editOrganize, queryAllCompanyOrgTreeList } from "@/api/basic/department";
import DepartmentDialog from "./modules/DepartmentDialog.vue";

const dataStore = useDataStore()

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ pageNo: 1, pageSize: 20 });
const deptData = ref()
const getDepartmentList = (initParam) => {

  queryAllCompanyOrgTreeList(initParam).then(res => {
    if (res.length) {
      deptData.value = res
    } else {
      deptData.value = []
    }
  })

  return deptData.value
};
onMounted(() => {
  // 初始化搜索按钮
  getDepartmentList(initParam)

})

const getTableList = (params: any) => {
  // return queryAllCompanyOrgTreeList(params);
  return getDepartmentList(params)
};

// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons();
onMounted(async () => {
  await dataStore.fetchRoleList();
  await dataStore.fetchDepartmentList()
});

// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
  { type: "selection", fixed: "left", width: 70 },
  {
    prop: "deptName",
    label: "部门名称",
    search: { el: "input" }
  },
  {
    prop: "status",
    label: "状态",
    search: { el: "select" },
    enum: departmentStatus,
  },
  {
    prop: "creatTime",
    label: "创建时间",
  },
  { prop: "operation", label: "操作" }
]);

// 打开 dialog(新增、查看、编辑)
const dialogTitle = ref('');
const dialogVisible = ref(false);
const selectedRow = ref<Partial<any>>({});
const departmentDialogRef = ref<InstanceType<typeof DepartmentDialog> | null>(null);

const openDialog = (title: string, row: Partial<any> = {}) => {
  dialogTitle.value = title;
  selectedRow.value = row;
  dialogVisible.value = true;
  departmentDialogRef.value?.acceptParams({
    title,
    isView: title === '详情',
    row,
    api: title === '新增' ? addOrganize : editOrganize,
    getTableList: proTable.value?.getTableList,
    allData: deptData.value,
  });
};


</script>
